<template>
  <div class="card mb-4">
    <div class="card-body">
      <h5 class="card-title">添加学生</h5>
      <form @submit.prevent="$emit('submit', student)">
        <div class="form-group">
          <label>姓名</label>
          <input v-model="student.name" type="text" class="form-control" required>
        </div>
        <div class="form-group">
          <label>年龄</label>
          <select v-model="student.age" class="form-control" required>
            <option 
              v-for="age in Array.from({length: 8}, (_, i) => i + 18)" 
              :value="age"
              :key="age"
            >
              {{ age }}
            </option>
          </select>
        </div>
        <div class="form-group">
          <label>性别</label>
          <div class="gender-options">
            <label>
              <input type="radio" v-model="student.gender" value="male" required> 男
            </label>
            <label>
              <input type="radio" v-model="student.gender" value="female"> 女
            </label>
          </div>
        </div>
        <button type="submit" class="btn btn-primary">添加</button>
      </form>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const student = ref({
  name: '',
  age: '',
  gender: 'male'
});
</script>

<style scoped>
.form-group {
  margin-bottom: 1rem;
}

.gender-options {
  display: flex;
  gap: 1rem;
  margin-top: 0.5rem;
}
</style>
